<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Tabs Example</title>
    	<link rel="stylesheet" type="text/css" media="all" href="resources/css/ext-all.css" /> 
			<script type="text/javascript">document.getElementById('loading-msg').innerHTML = '加载核心...';</script>
			<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
		 	<script type="text/javascript" src="ext-all.js"></script>
		 	<!--
    		<script type="text/javascript" src="ctree.js"></script>
    		<script type="text/javascript" src="test_tree.js"></script>
    		-->
    		<script type="text/javascript">
    		MyGridView=Ext.extend(Ext.grid.GridView,{ 
  renderHeaders : function(){ 
      var cm = this.cm, ts = this.templates; 
      var ct = ts.hcell,ct2=ts.mhcell; 
     
      var cb = [], sb = [], p = {},mcb=[];   
      for(var i = 0, len = cm.getColumnCount(); i < len; i++){ 
          p.id = cm.getColumnId(i); 
          p.value = cm.getColumnHeader(i) || ""; 
          p.style = this.getColumnStyle(i, true); 
          if(cm.config[i].align == 'right'){ 
              p.istyle = 'padding-right:16px'; 
          } 
          cb[cb.length] = ct.apply(p); 
          if(cm.config[i].mtext)mcb[mcb.length]=ct2.apply({value:cm.config[i].mtext,mcols:cm.config[i].mcol}); 
      } 
      var s=ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';',mergecells:mcb.join("")}); 
      return s; 
  } 
}); 
viewConfig={ 
          templates:{             
              header:new Ext.Template( 
                  ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', 
                  ' <thead> <tr class="x-grid3-hd-row">{mergecells} </tr>' + 
                  ' <tr class="x-grid3-hd-row">{cells} </tr> </thead>', 
                  " </table>" 
                  ), 
          mhcell: new Ext.Template( 
                  ' <td class="x-grid-cell" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>', 
                  " </td>" 
                  )   
          } 
      }; 
Ext.onReady(function(){   
  var data=[{id:1, 
              name:'小王', 
              email:'xiaowang@easyjf.com', 
              sex:'男', 
              bornDate:'1991-4-4'}, 
            {id:1, 
              name:'小李', 
              email:'xiaoli@easyjf.com', 
              sex:'男', 
              bornDate:'1992-5-6'}, 
          {id:1, 
              name:'小兰', 
              email:'xiaoxiao@easyjf.com', 
              sex:'女', 
              bornDate:'1993-3-7'}           
          ]; 
  var store=new  Ext.data.JsonStore({ 
      data:data, 
      fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] 
          });   
      var colM=new Ext.grid.ColumnModel([{ 
                  header:"姓名", 
                  mtext:"基本信息", 
                  mcol:2, 
                  dataIndex:"name", 
                  sortable:true, 
                  editor:new Ext.form.TextField()},               
              {header:"性别", 
                dataIndex:"sex", 
                editor:new Ext.form.ComboBox({transform:"sexList", 
                                                triggerAction: 'all', 
                                                lazyRender:true}) 
                }, 
              {header:"出生日期", 
                dataIndex:"bornDate", 
                mtext:"其它信息", 
                  mcol:2, 
                width:120, 
                renderer:Ext.util.Format.dateRenderer('Y年m月d日'), 
                editor:new Ext.form.DateField({format:'Y年m月d日'})}, 
              {header:"电子邮件", 
                dataIndex:"email", 
                sortable:true, 
                editor:new Ext.form.TextField()} 
              ]); 
  var grid = new Ext.grid.EditorGridPanel({ 
      renderTo:"hello", 
      title:"学生基本信息管理", 
      height:200, 
      width:600,   
      cm:colM, 
      store:store, 
      view:new MyGridView(viewConfig), 
      autoExpandColumn:3 
  }); 
}); 
    </script>		
     </head>
<body>
<div id="box"> </div> 
<div id="hello"> </div> 
<select name="sexList" id="sexList" style="display: none;"> 
      <option>男 </option> 
      <option>女 </option> 
</select> 
</body>
</html>
      